<template>
  <div class="container">
    <!-- 开灯按钮 -->	
    <button class="weui-btn" type="primary" size="mini" @click="onClickOpen" :data-info="2">开灯</button>
    
    <!-- 关灯按钮 -->
    <button type="warn" size="mini" @click="onClickOff">关灯</button>



    <!-- 显示温度 -->
    <button size="mini">温度：{{ Temperature }}℃</button>

  </div>
  <!-- 输入框 -->
  <div>
    <input @input="inputHandler1" placeholder="请输入插座编号"/>
    <input @input="inputHandler2" placeholder="输入框2"/>
  </div>
  
<!-- <scroll-view class="container1" scroll-y>
必须要在view里才算子类
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view> -->

<!-- 滚动按钮A,B,C -->
<scroll-view class="container1" scroll-y>
  <!-- A后面的style是用来设置外边距的-->
  <button class="scrollbuttonA" type="primary" 
size="mini"bindtap="navigateToOtherPage">A</button>
  <button class="scrollbuttonB" type="primary" size="mini">B</button>
  <button class="scrollbuttonC" type="primary" size="mini">C</button>
</scroll-view>
</template>




<script>
  // /* 阿里云有关部分 */
  // import mqtt from '../../utils/mqtt.js';
  // const aliyunOpt = require('../../utils/aliyun/aliyun_connect.js');
  
  export default {
    data() {
      return {
        Temperature:0,
        client:null,//记录重连的次数
        reconnectCounts:0,//MQTT连接的配置
        subscribed: false, // 订阅标志，初始化为false，表示未订阅

        options:{
          protocolVersion: 4, //MQTT连接协议版本
          clean: false,
          reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
          connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
          resubscribe: true, //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
          clientId: '',
          password: '',
          username: '',
        },

        aliyunInfo: {
          productKey: 'k214fOqXdly', //阿里云连接的三元组 ，请自己替代为自己的产品信息!!
          deviceName: 'Wechat', //阿里云连接的三元组 ，请自己替代为自己的产品信息!!
          deviceSecret: '848700d79ceadd957084ce02c47da7b7', //阿里云连接的三元组 ，请自己替代为自己的产品信息!!
          regionId: 'cn-shanghai', //阿里云连接的三元组 ，请自己替代为自己的产品信息!!
          pubTopic: '/k214fOqXdly/Wechat/user/Wechat', //发布消息的主题
          subTopic: '/k214fOqXdly/Wechat/user/get', //订阅消息的主题
        },
      };
    },

    // methods部分
    methods: {
      onLoad() {
        let clientOpt = aliyunOpt.getAliyunIotMqttClient({
          productKey: this.aliyunInfo.productKey,
          deviceName: this.aliyunInfo.deviceName,
          deviceSecret: this.aliyunInfo.deviceSecret,
          regionId: this.aliyunInfo.regionId,
          port: this.aliyunInfo.port,
        });

        console.log("get data:" + JSON.stringify(clientOpt));
        let host = 'wxs://' + clientOpt.host;
        
        this.clientId = clientOpt.clientId;
        this.password = clientOpt.password;
        this.username = clientOpt.username;
        
        console.log("this.clientId:" + this.clientId);
        console.log("this.username:" + this.username);
        
        // 连接 MQTT 服务器
        this.client = mqtt.connect(host, {
          clientId: this.clientId,
          username: this.username,
          password: this.password,
        });

        this.client.on('connect', function () {
          wx.showToast({
            title: '连接成功'
          });
          console.log("连接成功");
        });

        this.client.on("message", (topic, payload) => {
          let dataFromALY = {};
          try {
            dataFromALY = JSON.parse(payload);
            console.log(dataFromALY);

            this.temperature = dataFromALY.Temperature;
          } catch (error) {
            console.log(error);
          }
        });

        this.client.on("error", function (error) {
          console.log("服务器 error 的回调" + error);
        });

        this.client.on("reconnect", function () {
          console.log("服务器 reconnect的回调");
        });

        this.client.on("offline", function () {
          console.log("服务器offline的回调");
        });
      },//onload

      // 按钮访问云端函数
      onClickOpen(event) {
		console.log("按钮被点击");  // 额外的调试信息
        this.sendCommond(1);
        console.log("开灯");
      },

      onClickOff() {
        this.sendCommond(0);
      },

      navigateToOtherPage() {
        wx.navigateTo({
          url: '/pages/other/other', // 目标页面路径
        });
      },

      inputHandler1(e) {
        console.log('输入框1的输入：', e.detail.value);
      },

      inputHandler2(e) {
        console.log('输入框2的输入：', e.detail.value);
      },

      sendCommond(data) {
        const sendData = {
          id: Date.now().toString(), // 使用当前时间戳作为唯一ID
          version: "1.0", // 固定版本号
          method: "thing.event.property.post", // 固定方法
          params: { // 参数部分，与物模型对应
            Temperature: data // 传入的温度值
          }
        };
        
        const sendDataJson = JSON.stringify(sendData);
        console.log("发送数据:", sendDataJson);
        
        if (this.client && this.client.connected) {
          this.client.publish(
            '/sys/k214fOqXdly/Wechat/thing/event/property/post', // 发布主题
            sendDataJson // 发送 JSON 数据
          );
        } else {
          wx.showToast({
            title: '请先连接服务器',
            icon: 'none',
            duration: 2000
          });
        }

        // 检查是否已订阅过消息
        if (!this.subscribed) {
          this.client.subscribe(this.aliyunInfo.subTopic, (err) => {
            if (!err) {
              console.log("订阅成功");
              wx.showModal({
                content: "订阅成功",
                showCancel: false,
              });

              this.subscribed = true;
            }
          });
        }//
      }//secommend
    }//methods
  };
</script>

<style>
/* 父容器样式 */
.container {
  display: flex;               /* 启用 flexbox 布局 */
  flex-direction: column;      /* 垂直排列按钮（默认为横向排列） */
  justify-content: center;     /* 垂直居中按钮 */
  align-items: center;         /* 水平居中按钮 */
  height: 50vh;               /*从上向下数，越小靠上面越近*/
}

/*普通按钮样式*/
button{
  margin:25px;
  font-size:10px;
  width:50%;
}

.text{
  height: 100rpx;
  font-size:small;
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue;
}

/*scroll-view*/
      .container1 view{
        text-align: center;
        line-height: 80px;/*文本距离容器顶部的高度*/
        }

      /* 这里的子类指在view里的 */
      .container1 view:nth-child(1){
        background-color:deepskyblue ;
        }
        .container1 view:nth-child(2){
          background-color:lightgreen;
          }
  
        .container1 view:nth-child(3){
          background-color:lightcoral;
          }
      .container1 {
        position: relative;   /* 设置父容器为定位上下文 */
        border: 1px solid green;  /* 边框线条 */
        height: 50px;        /* 容器高度 */
        width: 80px;          /* 容器宽度 */
        }
/* 这个优先级会比总的button高 */
        .container1 button {
          position: absolute;   /* 子元素绝对定位 */
          width: 100%;               /* 调整按钮宽度占父容器的比例 */
          height: 30px;             /* 固定按钮高度 */
        }

        .scrollbuttonA{
          left: -48.1rpx;      /* 靠左 */
          top: -48.1rpx;        /* 设置为0距离上面还有25px=48.1rpx*/
        }
        .scrollbuttonB{
          left: -48.1rpx;      /* 靠左 */
          top: 9.62rpx;        /* 靠上 */
        }
        .scrollbuttonC{
          left: -48.1rpx;      /* 靠左 */
          top: 67.34rpx;        /* 靠上 */
        }
/*input文本框*/
        input {
          border: 1px solid #eee;
          padding: 5px;
          margin: 5px;
          border-radius: 3px;
        }
</style>
